<template>
    <div>
        <div v-for="order in tableData" :key="order">
            <div>
                <div type="warning" plain style="margin-top:30px;margin-left:350px;margin-right:350px;background-color:#E4E7ED;border-radius: 16px">
                    <div style="padding-top:20px;padding-bottom: 20px;padding-left:10px;padding-right:10px">
                        <p><b>{{order.title}}</b></p>
                        <el-row :gutter="20">
                            <el-col :span="8" style="padding-top:20px">
                                <div class="grid-content bg-purple">
                                    <router-link :to="'/detail?category='+order.category+'&id='+order.product_id" style="color:black">
                                        <img :src="require('@/assets/'+order.category+'/'+order.product_id+'/1.jpg')" style="width: 150px; height: 150px"><br>
                                    </router-link>
                                </div>
                            </el-col>
                            <el-col :span="16" style="padding-top:20px">
                                <div class="grid-content bg-purple">
                                    <el-row>
                                        <el-col :span="12">
                                            <div class="grid-content bg-purple">
                                                <p>店铺归属：{{order.shopname}}</p>
                                                <p>订单状态：{{order.status}}</p>
                                            </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="grid-content bg-purple">
                                                <p>商品数量：{{order.product_nums}}</p>
                                                <p>商品总价：{{order.price}}元</p>
                                            </div>
                                        </el-col>
                                    </el-row>
                                    <div class="grid-content bg-purple-light" style="padding-top:50px;padding-left:300px">
                                        <el-button type="info" @click="dialogFormVisible = true;setform(order.product_id,order.category)">评论</el-button>
                                        <el-button type="danger" v-if="order.status == '支付成功'" @click="refund(order.id)">退货</el-button>
                                        <el-button type="danger" v-else disabled>退货</el-button>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
    <el-dialog title="评论" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="输入评论" :label-width="formLabelWidth">
                 <el-input v-model="form.text" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;comment()">确 定</el-button>
            </div>
    </el-dialog>
    </div>
</template>

<script>
export default {
    name: "purchased",
    data(){
        return{
            dialogFormVisible: false,
            tableData:[],
            form: {
                id: '',
                category: '',
                text: ''
            },
            formLabelWidth: '120px'
        }
    },
    methods:{
        refund(id){
            this.$axios.post("/api/updateUserOrderStatus",this.$querystring.stringify({
            id:id,
            })).then(reponse=>{
            if(reponse.data == true){
               alert("申请退款成功")
            }else{
                alert("申请退款失败")
            }
            })
        },
        setform(id,category){
            this.form.id = id;
            this.form.category = category
        },
        comment(){
            this.$axios.post("/api/insertComment",this.$querystring.stringify({
            username:this.$cookies.get("username"),
            product_id:this.form.id,
            category:this.form.category,
            commenttext:this.form.text,
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
               alert("评论成功")
            }else{
                alert("系统错误")
            }
            })
            console.log(this.form.text);
        }
    },
    mounted(){
        if (this.$cookies.get("username") == null){
            alert("请登录");
            this.$router.push("/login")
        }else{
            this.$axios.get("/api/getUserOrders?username="+this.$cookies.get("username")).then(res=>{
                this.tableData = res.data
                console.log(this.tableData);
            });
        }
    }
}
</script>